<template>
  <div class="Detailed">
    <div v-if="state" class="Review-body">
      <ul v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
        <li v-for="a in items">
          <div>
            <p style="font-size: 1.4rem">{{a.cashback_state_desc}}</p>
            <p>{{a.create_time.split(' ')[0]}}</p>
          </div>
          <div>
            <p>
              <span>+</span>{{a.currency}}
            </p>
            <p v-if="a.cashback_state==1">待结算</p>
            <p v-if="a.cashback_state==2">已结算</p>
            <p v-if="a.cashback_state==3">已失效</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="Detailed-img" v-if="!state">
      <img src="../../assets/img/Detailed/icon@3x.png" alt="">
      <p>您还没有收支明细哦~</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data: function () {
      return {
        items: [],
        page_index: 0,
        loading: true,
        state: true
      }
    },
    mounted: function () {
      this.loadMore()
    },
    methods: {
      loadMore: function () {
        this.page_index++
        var data = this.$Login.oauth_token
        data.page_index = this.page_index
        this.$axios.cashback_record(data).then(res => {
          if (res.data.qing_code === 303 && this.page_index === 1) {
            this.state = false
            this.loading = true
            return
          }
          if (res.data.qing_code === 303) {
            this.loading = true
            return
          }
          this.loading = false
          this.items.push.apply(this.items, res.data.qing_data.cashbackRecords)
        })
      },
      goReflect: function () {
        this.$router.push({path: 'Reflect'})
      }
    },
    components: {}
  }
</script>

<style scoped>
  @import "../../assets/css/views/Detailed/index.css";

  .Detailed .Review-body ul li div:last-child p:last-child {
    font-size: .9rem;
    color: #90999e;
  }
</style>
